<template>
    <div class="home-container">
        <!-- 导航表单 -->
        <van-nav-bar class="page-nav-bar" fixed>
            <van-button to="/search" class="search-btn" type="info" slot="title" icon="search" round size="small">搜索</van-button>
        </van-nav-bar>
        <!-- 频道列表 -->
        <van-tabs class="channel-tabs" title-inactive-color='#777' title-active-color='#333' v-model="active" animated swipeable>
            <van-tab v-for="item in channels" :key="item.id" :title="item.name">
                <ArticleList :channel="item" />
            </van-tab>
            <div slot="nav-right" class="placeholder"></div>
            <div slot="nav-right" class="hamburger-btn" @click="isChannelEditShow = true">
                <i class="toutiao toutiao-gengduo"></i>
            </div>
        </van-tabs>
        <!-- 频道编辑弹出层 -->
        <van-popup
            v-model="isChannelEditShow"
            closeable
            position="bottom"
            close-icon-position="top-left"
            round
            :style="{ height: '100%' }"
        >
            <ChannelEdit :my-channels="channels" :active-index="active" @update-active="updateActive" />
        </van-popup>
    </div>
</template>

<script>
import { getUserChannels } from "@/api/user";
import ArticleList from "./components/article-list";
import ChannelEdit from "./components/channel-edit";
import { mapState } from "vuex";
import { getItem } from "@/utils/storage";
export default {
    name:"HomeIndex",
    components:{ArticleList,ChannelEdit},
    data() {
        return {
            active: 0,
            channels:[],//频道列表
            isChannelEditShow:false,//弹出层展示的状态
        };
    },
    computed:{
        ...mapState(['user'])
    },
    methods:{
        async loadChannels(){
            try {
                let channels = []
                if (this.user) {
                    // 已登录
                    const { data } = await getUserChannels()
                    channels = data.data.channels
                } else {
                    // 未登录
                    const localChannels = getItem('TOUTIAO-CHANNELS')
                    // 本地存储 存在
                    if (localChannels) {
                        channels = localChannels
                    } else {
                        // 不存在 -- 默认频道列表
                        const { data } = await getUserChannels()
                        channels = data.data.channels
                    }
                }
                this.channels = channels
            } catch (error) {
                this.$toast('获取频道数据失败')
            }
        },
        updateActive(index,isChannelEditShow = true){
            this.active = index;
            this.isChannelEditShow = isChannelEditShow
        }
    },
    created(){
        this.loadChannels()
    }
};
</script>

<style lang="less" scoped>
.home-container{
    padding-top: 174px;
    padding-bottom: 100px;
    /deep/.van-nav-bar__title{
        max-width: unset;
    }
    .search-btn{
        width: 555px;
        height: 64px;
        background-color: #5babfb;
        border: none;
        font-size: 28px;
        .van-icon{
            font-size: 36px;
        }
    }
    /deep/.channel-tabs{
        .van-tabs__wrap{
            position: fixed;
            top: 92px;
            left: 0;
            right: 0;
            height: 82px;
        }
        .van-tab{
            min-width: 200px;
            font-size: 30px;
            border-right: 1px solid #edeff3;
        }
        .van-tabs__nav{
            padding-bottom: 0;
        }
        .van-tabs__line{
            bottom: 8px;
            width: 31px !important;
            height: 6px;
            background-color: #3296fa;
        }
        .placeholder{
            flex-shrink: 0;
            width: 66px;
            height: 82px;
        }
        .hamburger-btn{
            position: fixed;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 66px;
            height: 82px;
            background-color: #fff;
            opacity: 0.902;
            i.toutiao{
                font-size: 33px;
            }
            // &::before{
            //     content: "";
            //     width: 10px;
            //     height: 100%;
                // background-image: url('~@/assets/');
            // }
        }
    }
}
</style>